<template>
  <div class="covdata">
    <div class="deadline">截至时间 {{ covData.modifyTime | formatData }}</div>
    <ul class="datacard">
      <li>
        <b
          >较昨日<span style="color: rgb(247, 76, 49)">{{
            covData.currentConfirmedIncr | newCount
          }}</span></b
        >
        <strong class="bold">
          {{ covData.currentConfirmedCount | NumberFormat }}
        </strong>
        <b>现存确诊</b>
      </li>
      <li>
        <b
          >较昨日<span style="color: rgb(162, 90, 78)">
            {{ covData.suspectedIncr | newCount }}</span
          ></b
        >
        <strong class="bold">
          {{ covData.suspectedCount | NumberFormat }}
        </strong>
        <b>境外输入</b>
      </li>
      <li>
        <b
          >较昨日<span style="color: rgb(174, 33, 44)">{{
            covData.seriousIncr | newCount
          }}</span></b
        >
        <strong class="bold">
          {{ covData.seriousCount | NumberFormat }}
        </strong>
        <b>现存无症状</b>
      </li>
      <li>
        <b
          >较昨日<span style="color: rgb(247, 130, 7)">{{
            covData.confirmedIncr | newCount
          }}</span></b
        >
        <strong class="bold">
          {{ covData.confirmedCount | NumberFormat }}
        </strong>
        <b>累计确诊</b>
      </li>

      <li>
        <b
          >较昨日<span style="color: rgb(93, 112, 146)">
            {{ covData.deadIncr | newCount }}</span
          ></b
        >
        <strong class="bold">
          {{ covData.deadCount | NumberFormat }}
        </strong>
        <b>累计死亡</b>
      </li>
      <li>
        <b
          >较昨日<span style="color: rgb(40, 183, 163)">
            {{ covData.curedIncr | newCount }}</span
          ></b
        >
        <strong class="bold">{{ covData.curedCount | NumberFormat }}</strong>
        <b>累计治愈</b>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Covdata",
  props: ["covData"],
  data() {
    return {};
  },
  filters: {
    newCount: (val) => {
      return val > 0
        ? "+" + new Intl.NumberFormat().format(val)
        : new Intl.NumberFormat().format(val);
    },
    NumberFormat: (val) => {
      //因为是异步函数，所以，要给加个判断，如果没拿到就返回空值，避免报错
      if (!val) return val;
      return val.toLocaleString();
      //return new Intl.NumberFormat("de-DE").format(val);
    },
    // formatData: (val) => {
    //   return new Date(val)
    //     .toLocaleString("zh", { hour12: false })
    //     .replaceAll("/", "-");
    // },
  },
  created() {},
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
ul li {
  text-decoration: none;
  list-style: none;
}
.covdata {
  padding: 0 0.34rem 0.1rem;
  .deadline {
    padding: 0.15rem 0;
  }
}
.datacard {
  display: flex;
  flex-flow: wrap;
  border: 0.01rem solid #ebebeb;
  border-radius: 0.08rem;
  box-shadow: 0 0.04rem 0.12rem 0 rgb(0 0 0 / 5%);
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    margin: 0.2rem 0;
    font-size: 0.24rem;
    color: #333;
    span {
      font-weight: normal;
      color: #666;
    }
  }
  strong {
    font-size: 0.3rem;
    padding: 0.09rem;
  }
}
li:nth-child(6) .bold {
  color: rgb(40, 183, 163);
}
li:nth-child(5) .bold {
  color: rgb(93, 112, 146);
}
li:nth-child(4) .bold {
  color: rgb(174, 33, 44);
}
li:nth-child(3) .bold {
  color: rgb(162, 90, 78);
}
li:nth-child(2) .bold {
  color: rgb(247, 130, 7);
}
li:nth-child(1) .bold {
  color: rgb(247, 76, 49);
}
</style>